<template>
  <div>
    <div id="container">
      <div class="caption"><h2>欢迎来到学生成绩管理系统</h2></div>
      <img src="@/assets/logo.png" alt="" />
      <div class="content">
        <span>账号:</span>
        <el-input v-model.trim="username" placeholder="请输入账号" class="admin"></el-input>
        <br />
        <span>密码:</span>
        <el-input placeholder="请输入密码" v-model.trim="passworld" show-password class="admin"></el-input>
      </div>
      <div class="button">
        <el-button type="success" @click="login">登录</el-button>
        <el-button type="success" class="register" @click="register">立即注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/static/usuali.css'
import axios from '@/utlis/axios.js'
export default {
  data() {
    return {
      username: '', //登录的账号
      passworld: '', //登录的密码
    }
  },
  methods: {
    async login() {
      if (this.username === '' || this.passworld === '') {
        return this.$message('输入的账号或者密码不能为空')
      }
      localStorage.setItem('username1', this.username)
      localStorage.setItem('passworld1', this.passworld)
      const { data: res } = await axios.get('/api/login', { params: { username: this.username, passworld: this.passworld } })
      if (/登录成功/.test(res.message)) {
        // console.log(res)
        localStorage.setItem('token', res.token)
        alert(res.message)
        this.$router.push('/admin')
      } else {
        alert('登录失败')
      }
    },
    register() {
      this.$router.push('/register')
    },
  },
  mounted() {
    this.username = localStorage.getItem('username')
    this.passworld = localStorage.getItem('passworld')
    this.username = localStorage.getItem('username1')
    this.passworld = localStorage.getItem('passworld1')
  },
}
</script>

<style lang="less" scoped>
#container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .caption {
    padding-top: 2vw;
    margin: 0 auto;
    font-size: 2vw;
    color: rgb(46, 141, 87);
  }

  img {
    width: 13vw;
    margin: 2vw auto;
    border-radius: 50%;
    border: 0.5vw solid #ccc;
    vertical-align: middle;
  }

  .content {
    margin: 0vw auto;
    padding-left: 50px;
    width: 30vw;
    vertical-align: middle;
    .admin {
      margin: 1vw;
      width: 20vw;
    }
  }

  .button {
    margin: 2vw auto;
    width: 15vw;
    display: flex;
    justify-content: space-between;
  }
}
</style>